<template lang="html">
  <div class="head">
    <div class="head-img">
      <img src="../../../../static/img/mine-index_favorite_01.png" alt=""/>
    </div>
    <i class='nick'>你家结婚</i>
    <p> <span class="time">0分钟</span> <span class="vip">开通会员</span></p>
  </div>
</template>

<script>
export default {
}
</script>

<style lang="less" scoped>
.head{
  width: 100%;
  height: 300/100rem;
  overflow: hidden;
  .head-img{
    height: 120/100rem;
    width: 120/100rem;
    border-radius: 50%;
    overflow: hidden;
    margin-left: 40%;
    margin-top: 40/100rem;
    float: left;

    img{
      width: 100%;
      height: 100%;
    }
  }
  .nick{
    font-size: 30/100rem;
    color:#333;
    display: inline-block;
    width: 300/100rem;
    margin-left: 30/100rem;
  }
  p{
    height: 60/100rem;
    font-size: 24/100rem;
    margin-top: 50/100rem;
    line-height: 60/100rem;
    text-align: center;

    span{
      display: inline-block;
      width: 150/100rem;
      height: 100%;
      margin: 0 40/100rem;
      border-radius: 20/100rem;
    }
    span.time{
      border:1/100rem solid #c995f5;
      color: #c995f5;
    }
    span.vip{
      border:1/100rem solid #333;
      color: #333;
    }
  }
}
</style>
